<template>
    <div>
        <!--统计数量-->
        <el-row>
            <el-col :span="24">
                <!--头部-->
                <div style="background-color: #F3F3F3;padding: 10px 0px;">
                    <span style="margin-right: 1284px;border-left: #1ABC9C 8px solid; padding: 5px;">订单退货列表</span>
                    <el-button @click="$router.go(0);">刷新</el-button>
                    <el-button @click="$router.go(-1);">返回</el-button>
                </div>
                <div style="margin: 20px 0 0px 30px;">
                    <el-button @click="c1(null)" class="box1">全部申请(<span style="color: red"></span>)</el-button>
                    <el-button @click="c1(2)"    class="box1">待处理(<span style="color: red"></span>) </el-button>
                    <el-button @click="c1(6)"    class="box1">已拒绝(<span style="color: red"></span>)</el-button>
                    <el-button @click="c1(10)"   class="box1">已完成(<span style="color: red"></span>)</el-button>
                    <el-button @click="c1(10)"   class="box1">退货中(<span style="color: red"></span>)</el-button>
                </div>
            </el-col>
        </el-row>
        <!--高级检索-->
        <el-row style="margin-top: 20px">
            <el-col :span="24">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span><i class="el-icon-search"></i>筛选查询</span>
                        <el-button @click="mohu" style="float: right;">查看</el-button>
                    </div>
                    <div>
                        <el-form :inline="true" ref="form" :model="form" label-width="80px">
                            <el-form-item label="单号">
                                <el-input v-model="form.orderNo" placeholder="订单编号"></el-input>
                            </el-form-item >
                            <el-form-item label="联系人">
                                <el-input v-model="form.userNumber" placeholder="用户账号"></el-input>
                            </el-form-item>
                            <el-form-item label="联系时间">
                                <el-date-picker
                                        type="date" v-model="form.createDate"
                                        placeholder="选择日期"
                                        value-format="yyyy-MM-dd"
                                ></el-date-picker>
                            </el-form-item>
                            <el-form-item label="联系电话">
                                <el-input v-model="form.orderPaymentChannel"></el-input>
                            </el-form-item>
                        </el-form>
                    </div>
                </el-card>
            </el-col>
        </el-row>
        <!--订单表格-->
        <el-row style="margin-top: 20px">
            <el-col :span="24">
                <div style="background-color: #F3F3F3;padding: 10px 0px;">
                    <span style="margin-right: 1284px;"><i class="el-icon-s-grid" style="vertical-align: middle;  font-size: 30px;color: #666666"></i>商品订单列表</span>
                </div>
                <!--表格-->
                <el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" border style="width: 100%">
                    <el-table-column type="selection" width="55"></el-table-column>
                    <!--<el-table-column fixed prop="returnId" label="隐藏的id" width="100" v-if="false"></el-table-column>-->
                    <el-table-column fixed prop="UsreOrder.userNumber" label="服务单号" width="150"></el-table-column>
                    <el-table-column fixed prop="returnlistShenqingData" label="申请时间" width="150"></el-table-column>
                    <el-table-column prop="User.account" label="用户账号" width="150"></el-table-column>
                    <el-table-column prop="UsreOrder.logisticsFee" label="退款金额" width="100"></el-table-column>
                    <el-table-column prop="User.trueName" label="联系人" width="100"></el-table-column>
                    <el-table-column prop="User.phone" label="联系电话" width="150"></el-table-column>
                    <el-table-column prop="returnlistStar" label="申请状态" width="100">
                        <template slot-scope="scope">
                            <!-- scope.row 包含表格里当前行的所有数据 -->
                            <span :class="scope.row.orderPaymentChannel?'act':'inact'">
                                {{scope.row.returnApplyState | returnStatusg}}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="returnDisposeDate" label="处理时间" width="120"></el-table-column>
                    <el-table-column label="操作" width="300">
                        <template slot-scope="scope">
                            <el-button @click="chakandingdan(scope)" type="text" size="small" ><router-link to="/thlbxq">查看详情</router-link></el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 分页器 -->
                <div class="block" style="margin-top:15px;">
                    <el-pagination align='center' @size-change="handleSizeChange" @current-change="handleCurrentChange"
                                   :current-page="currentPage"
                                   :page-sizes="[1,5,10,20]"
                                   :page-size="pageSize"
                                   layout="total, sizes, prev, pager, next, jumper"
                                   :total="tableData.length">
                    </el-pagination>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    export default {
        name: "orderFromList",
        methods: {
            //每页条数改变时触发 选择一页显示多少行
            handleSizeChange(val) {
                //console.log(`每页 ${val} 条`);
                this.currentPage = 1;
                this.pageSize = val;
            },
            //当前页改变时触发 跳转其他页
            handleCurrentChange(val) {
                //console.log(`当前页: ${val}`);
                this.currentPage = val;
            },
            //模糊查提交方法
            mohu() {
                //this.from.createDate = this.from.createDate.getTime();
                this.$http.get("/userorder/getOrderrenturnScAll",{
                    params:this.form
                })
                    .then(e => {
                        console.log(e.data)
                        this.tableData = e.data;
                        if(this.tableData.length != 0){
                            this.tabledatas = false;
                        }
                    });
            },
            //查看订单退货详情
            chakandingdan(e) {
                this.index = e.$index;
                //查看订单对应商品信息
                this.$http.get("/userorder/getBysp", {
                    params: {
                        id: 1,
                }
                }).then(e => {
                    this.product = e.data;
                })
            },
            c1(vla){
                /*this.className="box2"
                this.$http.get("/userorder/getAll", {
                    params: {
                        orderStatus: vla,
                        orderType:2
                    }
                }).then(e => {
                    this.tableData = e.data;
                })*/
            },
            /*dingdanzhuangtailiebiao(){
                for(var i =0;i<this.tableData.length;i++){
                    if(this.tableData[i].orderStatus == 2){
                        this.tongji.dfk += 1;
                    }else if(this.tableData[i].orderStatus == 6){
                        this.tongji.yqs += 1;
                    }else if(this.tableData[i].orderStatus == 10){
                        this.tongji.yqx += 1;
                    }
                }
            }*/
        },
        filters:{
            returnStatusg(e){
                if(e==1){return "待处理";
                }else if(e==2){return "已拒绝"}
                else if(e==3){return "已完成"}
                else if(e==4){return "退货中"}
                return "";
            },
        },
        data() {
            return {
                tableData: [
                    //{orderStatus:2}
                ],
                tabledatas:true,
                currentPage: 1, // 当前页码
                total: 20, // 总条数
                pageSize: 5, // 每页的数据条数
                //高级检索提交时input中的数据
                form: {
                    orderNo:"",
                    userNumber:"",
                    orderPaymentChannel:"",
                    orderNo:"",
                    createDate:"",
                    orderType:2
                },
                tongji:{
                    qb:0,dfk:0,yqs:0,yqx:0,
                }
            };
        },
        //初始化数据表格
        created(){
            //查询课程订单信息
            this.$http.get("/userorder/getOrderrenturnScAll")
                .then(e => {
                    this.tableData = e.data;
                    //this.tongji.qb = this.tableData.length
                    //this.dingdanzhuangtailiebiao();
                })
        },
    }
</script>

<style scoped>
    .box1{
        width: 150px;
    }
    .box2{
        width: 150px;
        background-color: #1ABC9C;
        color: white;
    }
</style>
